<template>
	<view>
		<view v-if="!maskHeight2" class="fixed-button">
			<view class="iconfont icon-guolv" @click="openMask(1)"></view>
		</view>
		<view  v-if="maskHeight2" class="mask-cat-filter"  hover-stop-propagation :style="[maskStyle]"  @touchmove.stop.prevent="() => {}"
		 :class="{'u-mask-show': show,'maskHeight2': maskHeight2}">
			<view class="cat_list">
				<u-tabs :list="cat_list" :is-scroll="false" :current="current" inactive-color="#ffffff"
				 bg-color="rgba(0, 0, 0, 0)" @change="changetab" font-size="34"  item-width="160" active-color="#ffffff"></u-tabs>
			</view>
			<view class="choosed-container">{{choosed_cat_name_str}}</view>
			<view class="tab_content_list" v-if="maskHeight2">
				<view class="tab_content_info" v-for="(item, index) in content_list" :key="index" @click="addChoosed(item, index)">
					<view  :class="{ 'selected': item.isSelected}" class="iconfont icon-a-019_duanku"></view>
					<view class="text">{{item.title}}</view>
				</view>
			</view>
			<view class="action_list" v-if="maskHeight2">
				<view class="action"><button class="my-btn bg-body black br60" @tap="reset">重置</button></view>
				<view class="action"><button class="my-btn bg-primary white br60" @click.stop="formSubmit">确定</button></view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name: "mask-cat-filter",
		props: {
			maskHeight2:{
				type: Number,
				default: 0
			},
			// 是否显示遮罩
			show: {
				type: Boolean,
				default: true
			},
			// 层级z-index
			zIndex: {
				type: [Number, String],
				default: 9999
			},
			// 用户自定义样式
			customStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
			zoom: {
				type: Boolean,
				default: false
			},
			// 遮罩的过渡时间，单位为ms
			duration: {
				type: [Number, String],
				default: 300
			}
		},
		mounted() {  
		    // 组件加载完成时触发某个事件  
		    this.content_list = this.content_list_all[0];
			console.log('=====初始化 mounted 加载 this.content_list========');
			console.log(this.content_list);
		  },  
		data() {
			return {
				choosed_tab_content:0,
				choosed_cat_name_str:'',
				choosed_cat_name_arr:[],
				choosed_cat_id:'',
				current:0,
				cat_list:[
					{
						name: '下装'
					}, {
						name: '衬衫'
					}, {
						name: '裙子',
					}
				],
				content_list:[],
				content_list_all:[
					[
						{
							id:1,
							title: '下装',
							icon:'icon-a-019_duanku',
							isSelected:false
						}, {
							id:2,
							title: '衬衫',
							icon:'icon-a-019_duanku',
							isSelected:false
						}, {
							id:3,
							title: '裙子',
							icon:'icon-a-019_duanku',
							isSelected:false
						}
					],
					[
						{
							id:4,
							title: '大衣',
							icon:'icon-a-019_dayi',
							isSelected:false
						}, {
							id:5,
							title: '背心',
							icon:'icon-a-019_beixin',
							isSelected:false
						}
					],
					[
						{
							id:6,
							title: '下装',
							icon:'icon-a-019_dayi',
							isSelected:false
						}, {
							id:7,
							title: '短裤',
							icon:'icon-a-019_duanku',
							isSelected:false
						}, {
							id:8,
							title: '内衣',
							icon:'icon-a-019_neiyi',
							isSelected:false
						}
					]
				],
				zoomStyle: {
					transform: ''
				},
				scale: 'scale(1.2, 1.2)'
			}
		},
		watch: {
			show(n) {
				if(n && this.zoom) {
					// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
					this.zoomStyle.transform = 'scale(1, 1)';
				} else if(!n && this.zoom) {
					// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
					this.zoomStyle.transform = this.scale;
				}
			}
		},
		computed: {
			maskStyle() {
				let style = {};
				style.backgroundColor = "rgba(0, 0, 0, 0.6)";
				style.zIndex = this.zIndex;
				return style;
			}
		},
		methods: {
			reset(){
				this.choosed_cat_name_arr=[];
				this.choosed_cat_name_str='';
				this.choosed_cat_id='';
				 this.content_list.forEach(item => {  
				  item.isSelected = false;  
				});  
			},
			formSubmit(event){
				//提交请求筛选
				console.log('======');
				this.openMask(0);
			},
			addChoosed(e, i){
				//一 选择的元素添加/删除
				const index = this.choosed_cat_name_arr.indexOf(e.title); 
				 if (index !== -1) {  
					// 如果元素存在，则删除它  
					this.choosed_cat_name_arr.splice(index, 1);  
					//移出选中的样式
					console.log('移出' + this.content_list[i].title);
					this.content_list[i].isSelected = false;
					console.log(this.content_list[i]);
				  } else {  
					// 如果元素不存在，则添加它  
					this.choosed_cat_name_arr.push(e.title);  
					//增加选中的样式
					console.log('添加' + this.content_list[i].title);
					this.content_list[i].isSelected = true;
					console.log(this.content_list[i]);
				  }
				this.choosed_cat_name_str = this.choosed_cat_name_arr.join(' / ');
				this.choosed_tab_content=1;
			},
			changetab(index) {
				this.current = index;
				this.content_list = this.content_list_all[index];
			},
			openMask(isShow) {
				console.log('isShow=========' + isShow);
				this.$emit('update', isShow);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "iconfont.css";
	.fixed-button{
		position: fixed; /* 固定在屏幕上 */  
		  bottom: 260rpx; /* 距离屏幕底部的距离 */  
		  right: 40rpx;
		  z-index: 9999; /* 提高层级，确保按钮在其他内容之上 */ 
		   .iconfont{
			   font-size: 60rpx;
			   padding: 30rpx;
			   border-radius: 50%;
			   background-color: rgba(0, 0, 0, 0.6) !important;
			   color: $-color-white;
		   }
	}
	.mask-cat-filter {
		position: fixed;
		bottom: -30rpx;
		// opacity: 0;
		height: 300rpx;
		border-radius: 30rpx;
		width: 650rpx;
		padding-top: 20rpx;
		margin: 0 50rpx;
		transition: all 0.5s ease-in-out;
		.choosed-container{
			height: 70rpx;
			width: 90%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 32rpx;
		}
		// transition: transform 0.3s;
		.cat_list{
			.u-tabs{
				background-color: rgba(0, 0, 0, 0.6) !important;
			}
			width: 550rpx;
			margin: 0 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $-color-white;
		}
		.tab_content_list{
			transition: all 0.5s ease-in-out;
			display: flex;
			flex-direction: row;
			.selected{
				background-color: $-color-primary;
				border-radius: 50%;
			}
			.tab_content_info{
				display: flex;
				flex-direction: column;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin: 10rpx;
				padding: 10rpx 20rpx 30rpx 20rpx;
				color: $-color-white;
				.iconfont{
					font-size: 90rpx;
					padding: 5rpx;
					margin: 10rpx 0;
				}
				.text{
					font-size: 28rpx;
				}
				
			}
			
		}
		
		.action_list{
			display: flex;
			flex-direction: row;
			.action{
				width: 40%;
				margin: 5rpx 20rpx;
			}
		}
		
	}
	.u-mask-show {
		opacity: 1;
	}
	.maskHeight2{
		transition: all 0.3s ease-in-out;
		height: 700rpx !important;
		.cat_list{
			border-bottom: 1rpx solid $-color-primary;
			padding-bottom: 20rpx;
		}
	}
 
</style>
